<template>
  <n-card :bordered="false" class="proCard">

    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableActionRef"
      :actionColumn="tableActionColumn"
      :scroll-x="860"
      bordered
    >
      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </BasicTable>

  </n-card>
</template>

<script lang="ts" setup>
import { h, reactive, ref } from "vue";
import { markdownPage } from "@/api/worker/fileSystem";
import { BasicTable, TableAction } from '@/components/Table';
import { EditOutlined } from "@vicons/antd";
import { useRouter } from "vue-router";
import { NButton } from "naive-ui";

const router = useRouter()

const tableActionRef = ref();
const columns = [
  {
    title: '文件名',
    key: 'name',
    width: 80,
  },
  {
    title: '文件路径',
    key: 'dirPath',
    width: 150,
    render: row => {
      return h(NButton, {
        text: true,
        type: 'primary',
        onClick: () => {
          router.replace(`/worker/fileSystem#${row.dirId}`)
        }
      }, { default: () => row.dirPath })
    }
  },
];
const tableActionColumn = reactive({
  width: 40,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(row) {
    return h(TableAction, {
      style: 'text',
      actions: [
        {
          label: '编辑',
          type: 'primary',
          icon: EditOutlined,
          onClick: () => router.replace(`/worker/editor/${row.id}`),
        },
      ],
    });
  }
});

const loadDataTable = async (res) => {
  const data = await markdownPage(
    { pageNumber: res.current, pageSize: res.size }
  );
  // total 指的是总共多少条数据
  const { current, size, total, records } = data;
  return {
    current,
    size,
    count: Math.ceil(total / size),
    records,
  };
};

function reloadTable() {
  tableActionRef.value.reload();
}

</script>

<style scoped>

</style>
